<template>
  <a-config-provider>
    <div class="demo-content-wrapper">
      <a-button type="success" ghost @click="refresh">
        强制刷新
      </a-button>
      <a-tabs
        v-model="tabValue"
        :render-tab-bar="renderTabBar"
        :tab-bar-extra-content="tabBarExtraContent"
      >
        <a-tab-pane key="exampleTable" tab="exampleTable">
          {{ clog('exampleTable rendered') }}
          <example-table />
        </a-tab-pane>

        <a-tab-pane key="exampleDetail" tab="exampleDetail">
          {{ clog('exampleDetail rendered') }}
          <example-detail />
        </a-tab-pane>

        <a-tab-pane key="exampleDateRange" tab="exampleDateRange">
          {{ clog('exampleDateRange rendered') }}
          <example-date-range />
        </a-tab-pane>

        <a-tab-pane key="exampleConfigProvider" tab="exampleConfigProvider">
          {{ clog('exampleConfigProvider rendered') }}
          <example-config-provider />
        </a-tab-pane>

        <a-tab-pane key="exampleTransferTree" tab="exampleTransferTree">
          {{ clog('exampleTransferTree rendered') }}
          <example-transfer-tree />
        </a-tab-pane>

        <a-tab-pane key="exampleTransferTable" tab="exampleTransferTable">
          {{ clog('exampleTransferTable rendered') }}
          <example-transfer-table />
        </a-tab-pane>

        <a-tab-pane key="exampleSelect" tab="exampleSelect">
          {{ clog('exampleSelect rendered') }}
          <example-select />
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-config-provider>
</template>

<script>
import exampleTable from './components/Table';
import exampleDetail from './components/Detail';
import exampleDateRange from './components/DateRange';
import exampleConfigProvider from './components/ConfigProvider';
import exampleTransferTree from './components/TransferTree';
import exampleTransferTable from './components/TransferTable';
import exampleSelect from './components/Select';

export default {
  name: 'App',
  components: {
    exampleTable,
    exampleDetail,
    exampleDateRange,
    exampleConfigProvider,
    exampleTransferTree,
    exampleTransferTable,
    exampleSelect,
  },
  data() {
    return {
      clog: window.console.log,
      tabValue: 'exampleTable',
    };
  },
  created() {},
  methods: {
    refresh() {
      this.$forceUpdate();
    },
    renderTabBar(renderProps, ScrollableInkTabBar) {
      renderProps.scopedSlots = {
        default: node => {
          // eslint-disable-next-line
          // console.log(node);
          return node;
        },
      };
      return <ScrollableInkTabBar {...{ renderProps }} />;
    },
    tabBarExtraContent() {
      return <div>123</div>;
    },
  },
};
</script>

<style lang="less">
html {
  margin: 0;
  padding: 20px 10px;
}
.demo-content-wrapper {
  padding-bottom: 24px;
}
</style>
